<template>
  <view class="list">
    <MyEmpty :data="state.list.length" :custom-style="{ minHeight: '500px' }">
      <view v-for="(item, index) in state.list" :key="index" class="li">
        <view class="info">
          <text v-if="item.is_first" class="first">首次</text>
          <text v-if="item.is_machine" class="machine">机算</text>
          <text v-else class="machine">手算</text>
          <text class="name">{{ item.solution_name }}</text>
          <text v-if="item.status === 0" class="statusbox statusbox-0">
            校验中
          </text>
          <text v-if="item.status === 2" class="statusbox statusbox-2">
            排队中
          </text>
          <template v-if="item.is_machine">
            <text v-if="item.status === 5" class="statusbox statusbox-5">
              已完成
            </text>
            <text v-if="item.status === 6" class="statusbox statusbox-6">
              计算失败
            </text>
          </template>
        </view>
        <view class="time">
          <text>
            {{ dayjs(item.create_datetime).format("YYYY-MM-DD HH:mm:ss") }}
          </text>
          <text v-if="item.status !== 5"></text>
          <text
            v-else-if="item.is_exists === 1"
            @click="
              state.detail.show = true;
              state.detail.matrix = item.result;
            "
          >
            查看详情
          </text>
          <text v-else="item.is_exists === 2">手动未求得此解，暂不展示</text>
        </view>
      </view>
    </MyEmpty>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import MyEmpty from "@/components/my-empty.vue";
import state from "../useState";
</script>

<style scoped lang="scss">
.list {
  box-sizing: border-box;
  padding: 0 16px 16px;
  background-color: #ffffff;

  .li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f2f2f2;
    &:last-child {
      border: none;
    }

    .info {
      display: flex;
      align-items: flex-start;
      gap: 4px;
      height: 15px;
      .first {
        border-radius: 4px;
        padding: 2px 4px;
        background: #edf8f0;
        font-size: 11px;
        line-height: 100%;
        color: #4ebd6d;
      }
      .machine {
        border-radius: 4px;
        padding: 2px 4px;
        background: #f6f6f6;
        font-size: 11px;
        line-height: 100%;
        color: rgba(0, 0, 0, 0.4);
      }
      .name {
        font-size: 14px;
        line-height: 100%;
        color: rgba(0, 0, 0, 0.6);
      }
      .statusbox {
        margin-left: auto;
        border-radius: 4px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 500;
        line-height: 100%;
        &-0 {
          background: rgba(255, 183, 0, 0.1);
          color: #d29e1a;
        }
        &-2 {
          background: rgba(26, 127, 254, 0.1);
          color: #1a7ffe;
        }
        &-5 {
          background: rgba(78, 189, 109, 0.1);
          color: #4ebd6d;
        }
        &-6 {
          background: rgba(255, 89, 89, 0.1);
          color: #ff5959;
        }
      }
    }

    .time {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      font-size: 12px;
      line-height: 100%;
      color: rgba(0, 0, 0, 0.4);
    }
  }
}
</style>
